<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="/WEB-INF/tlds/spring.tld"%>
<%@ taglib prefix="c" uri="/WEB-INF/tlds/c.tld"%>
<c:set var="BasePath" value="${pageContext.request.contextPath}"></c:set>
<c:set var="Plugins" value="${pageContext.request.contextPath}/res/plugins"></c:set>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分配角色</title>
<link href="${Plugins}/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<link href="${Plugins}/ligerUI/skins/Gray/css/all.css" rel="stylesheet" type="text/css" />
<script src="${Plugins}/jquery/jquery-1.3.2.min.js"	type="text/javascript"></script>
<script src="${Plugins}/ligerUI/js/ligerui.min.js" type="text/javascript"></script>
<script src="${Plugins}/jquery-validation/jquery.validate.min.js" type="text/javascript"></script>
<script src="${Plugins}/jquery-validation/jquery.metadata.js" type="text/javascript"></script>
<script src="${Plugins}/jquery-validation/messages_cn.js" type="text/javascript"></script>
<link href="${BasePath}/res/css/common/base.css" rel="stylesheet" type="text/css" />
<script src="${BasePath}/res/js/common/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript" src="${BasePath}/res/js/user/user.js"></script>
<script type="text/javascript" src="${BasePath}/res/js/ligerCommon.js"></script>
<style type="text/css">
    body{ font-size:12px;}
    .l-table-edit {}
    .l-table-edit-td{ padding:4px;}
    .l-button-submit,.l-button-cancel{width:80px; float:left; margin-left:10px; padding-bottom:2px;}
    .l-verify-tip{ left:230px; top:120px;}
    .navbar {
		height: 20px;
		border-bottom: #E6E6E6 solid 1px;
		line-height: 20px;
	}
	#select1,#select2{width:200px; margin:0px;padding:5px; }
	.sel-div{border:1px solid #ccc;width:200px; overflow:hidden; margin-left:50px;}
	.a-up,.a-down{display: block;border: 1px solid #ccc;text-decoration:none;width:200px; background:#F2F2F2; text-align:center; height:25px; line-height:25px;cursor:pointer; letter-spacing:2px; zoom:1; margin-left:50px;}
	.a-up{border-bottom:none;}
	.a-down{border-top:none;}
	.a-right,.a-left{display:block; border:1px solid #ccc; width:100px; height:25px; line-height:25px; background:#F2F2F2;margin:15px; cursor:pointer; margin-left:20px;}
	.a-left{margin-top:20px;}
</style>
</head>
<body>
<div class="contentMain">
        	<div class="navbar">
           	<span>您当前的位置：</span> 系统管理  &gt; 供应链用户角色分配</div>
            
  <div class="content">    
      <div class="blank15"></div><br>
      <div class="yt-c-div">
      	<form action="allocateRole.do" name="allocateRoleForm" id="allocateRoleForm" method="post" style="padding:0px;margin:0px;">
      		<input  type="hidden" name="id" id="id" value="${userVo.id}" />
      		<input  type="hidden" name="userNature" id="userNature" value="${userVo.userNature}" />
	        <table cellpadding="0" cellspacing="0" style="padding-left:30px;padding-top:15px;">
	            <tbody>
	            	<tr>
	            		<td align="center">未拥有角色</td>
	            		<td></td>
	            		<td align="center">已拥有角色</td>
	            	</tr>
	                <tr>
		                <td valign="top">
							<a id="right_up" class="a-up">上移</a>
		               		<div class="sel-div">
		                		<select multiple id="select2" size="20">
									<c:forEach items="${leftRoleVos }" var="leftRoleVo">
										<option value="${leftRoleVo.id }">${leftRoleVo.roleName }</option>
									</c:forEach>
		                		</select>
		                	</div>
		                	<a id="right_down" class="a-down">下移</a>
		                </td>
		                <td align="center" valign="middle">
		                	<a id="remove" class="a-left">增加角色&gt;&gt;</a>
		                	<a id="add" class="a-right">&lt;&lt; 删除角色</a>
		                </td>
		                <td>
		                	<a  id="left_up" class="a-up">上移</a>
		                	<div class="sel-div">
		               			<select  name="ownRoleIds" size="20" multiple id="select1" >
		               				<c:forEach items="${ownRoleVos }" var="ownRoleVo">
										<option value="${ownRoleVo.id }">${ownRoleVo.roleName }</option>
									</c:forEach>
		                		</select>
		               	 	</div>
		                	<a  id="left_down" class="a-down">下移</a>
		                </td>
	                </tr>
	            </tbody>
	        </table><br>
	        <input type="button" value="提交" id="Button1" onclick="javascript:allocateRole();" class="l-button l-button-submit" style="margin-left: 50px;" /> 
			<input type="button" value="取消" name="cancel" onclick="javascript:cancelAllocateRole();" class="l-button l-button-cancel"/>
        </form>
        <div class="blank20"></div>
      </div>   	
</div>
</div>
</body>
</html>